[Angular-1]初探Controller

發表於 更新於 分類於 ，

Controller是操縱功能的Directive，包含在Module之下，在JS創造的方式也與function十分相似。

實作範例：

app.js
1
2
3
4
5
6
7
8
var gem = { name: 'Azurite', price: 2.95 };
//創造一個物件
var app = angular.module('gemStore', []);
app.controller("StoreController", function(){
  this.product = gem;
  //把物件帶入this.product
});
//因為我們創造的模組名稱是app，所以要用app.controller創建

app.html
1
2
3
4
5
6
7
8
9
10
<body ng-controller="StoreController as store">
//把controller導入body的DOM並給他名稱store
  <div class="product row">
    <h3>
      {{store.product.name}}
      <em class="pull-right">{{store.product.price}}</em>
//之後要拿這個controller的東西要用store.product去拿
    </h3>
  </div>
</body>

正常來說就會顯示gem裡面的name和price囉！
直得一提的是這個Controller裡的東西只有在這個DOM裡面使用！！

錯誤的範例如下：

1
2
3
4
5
6
7
8
9
10
<div ng-controller="StoreController as store">
</div>
//Controller使用的DOM已經結束了！！
<div>
  <h3>
    {{store.product.name}}
    <em class="pull-right">{{store.product.price}}</em>
  </h3>
</div>
//這時候什麼東西都抓不到囉！

以上是基本Module裡的Controller與HTML溝通，跟原生JavaScript的function使用方法一樣，裡面也可以放物件和功能，但他一定要有主人(Module)帶領他唷！

參考上一篇[Angular-1]初探Angular-1]的文章，教學影片給我們Angular的小總結，如下附圖：
螢幕快照 2016-11-18 下午6.18.38.png